<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>夜读书FM</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="夜读书,夜读书FM,电台">
    <meta name="description" content="国内专业音频分享平台，随时随地，听我想听！4亿用户选择的在线音频平台。1亿多条原创有声内容覆盖有声书、儿童、相声评书、财经新闻、音乐等328类。">
    <meta name="keywords" content="夜读书,网络电台,个人电台,音频,有声书,相声,儿童,音乐,情感">
    <link rel="stylesheet" href="{{ asset('/style/css/yefm.css') }}">      
    <script src="{{ asset('/scripts/ximalaya/xmsdk.min.js') }}"></script>
    <script src="{{ asset('/scripts/ximalaya/vue.min.js') }}"></script>     
</head>
<body>   
<div class="page">
    <div class="top_dark">
       <div class="top_title"><a href="{{url('yefm')}}">夜读书FM</a></div>
    </div>
    <div class="player-box rel" v-cloak>
        <div class="xm-bg-blur player-box-bg" :style="{backgroundImage: 'url(' + rows.tracks[0].cover_url_middle + ')'}">            
        </div>
        <div class="rel">
            <div class="cover-container rel">
                <span class="player_btn prev"></span>
                <span class="player_btn next"></span>
                <div class="track-cover rel">
                    <img class="cover-image" :src="rows.tracks[0].cover_url_middle">
                    <i class="player-sprite play-btn player-play" v-on:click="play_tracks"></i>
                    <div class="play-count">
                        <i class=""></i>@{{play_count}}
                    </div>
                </div>
            </div>
            <h1 class="title"><span class="v-m">@{{rows.tracks[0].track_title}}</span></h1>
            <div class="progress-bar-wrap rel">
                <div class="progress-bar">
                    <div class="touch-box"></div>
                    <div style="width: 0%;" class="cache-round"></div>
                    <div style="width: 0%;" class="play-round"></div>
                    <span class="time-bar current">00:00</span>                
                    <span class="time-bar duration">@{{duration}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="track-list" v-cloak>
        <div class="album-info">
            <div class="list-meta">
                <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id" class="cover">
                    <img :src="rows.cover_url_small">
                </a>
                <div class="">
                    <a href="'{{url('yefm/ting').'/'}}' + rows.album_id"><h2 class="album-info-title">@{{rows.album_title}}</h2></a>
                    <p class="album-info-desc">@{{rows.total_count}}集</p>
                </div>
            </div>
        </div>
        <ul class="list-body">
            <li class="list-item" v-for="row in rows.tracks">
                <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id +'/' + row.id" class="track-link">
                    <div class="xm-list-track">
                        <p class="xm-icon list-play icon-list_play">播放</p>
                        <div class="titleWrapper">@{{row.track_title}}</div>
                        <p class="xm-icon list-download icon-list_download">下载</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div> 
<script>
    const { config } = window.xmsdk;

    config({
        app_key: '5e3de3aa76d5201658463c03abf6fbc1', 
        sig_url: 'http://www.yedushu.com/yefm/jssdk_sig', 
        device_id: 'u0sdfu09s80f9809sdf8908sfk', 
        timeout: 10 * 1000,
        debug: true
    });

    const { XMLY, XMplayer } = window.xmsdk;
    const xmly = new XMLY();

    // 批量获取声音信息 
    xmly.request({
        url: 'https://api.ximalaya.com/tracks/get_batch',
        type: 'get',
        params: {
            ids: '{{$tracks_id}}',
        }
    }).then(res => {
        console.log(res);
        new Vue({
            el: '.player-box',
            data: {
                rows: res.data,
            },
            mounted() {
                document.title = this.rows.tracks[0].track_title + ' - 夜读书FM';
            },
            computed: {
                duration: function() {
                    //音频时长
                    return (this.rows.tracks[0].duration  / 60).toFixed(2);
                },
                play_count: function ()  {
                    //计算播放次数
                    let count = this.rows.tracks[0].play_count;
                    if(count >= 100000000) {
                        return (count/100000000).toFixed(2) + '亿';
                    }
                    else {
                        return (count/10000).toFixed(2) + '万';
                    }

                } 
            },
            methods: {
                play_tracks:function() {
                    const player = new XMplayer({
                        playlist: [{{$tracks_id}}], //声音id
                        playMode: 'single', //播放模式
                        breakpoint: true, //断点续播
                    });
                    player.play();
                }
            }

        });   
    });

    // 专辑浏览
    xmly.request({
        url: 'https://api.ximalaya.com/albums/browse',
        type: 'get',
        params: {
            album_id: '{{$album_id}}',
            sort: 'asc',
            page: 1,
            count: 10,
        }
    }).then(res => {
        console.log(res);
        new Vue({
            el: '.track-list',
            data: {
                rows: res.data
            }
        });   
    });    
</script>
</body>
</html>
